<template>
	<view class="">
		<view v-for="(item, index) in couponList" :key="index" class="coupon_box">
			<text class="hui">优惠券</text>
			<view class="topCricle">
			</view>
			<view class="bottomCricle">
			</view>
			<view class="left">
				<view class="left_top">
					<text class="hui_name">{{item.name}}</text>
				</view>
				<view class="left_middle">
					<text>
						<slot>开始：</slot>{{item.startTime}}
					</text>
					<br>
					<text>
						<slot>结束：</slot>{{item.endTime}}
					</text>
				</view>
				<view class="left_bottom" @click="openTheTips">
					<p>使用规则</p>
					<uni-icons type="help" size="14" color="#7e827b"></uni-icons>
				</view>
			</view>
			<image src="./ysy.png" class="ysy" v-if="item.status == 1"></image>
			<view class="line">
			</view>
			<view class="right" :style="'background:' + (item.status == 0 ? colors:'')">
				<view class="money">￥{{item.sub}}</view>
				<text>满{{item.money}}可用</text>
				<text class="shiyong" :style="{'color': colors}" v-if="item.status == 0"
					@click="handelReceive(item)">立即领取</text>
			</view>

		</view>
		<uni-popup ref="popup" type="bottom" class="pop">
			<view class="popBox">
				<view class="top">
					<text>优惠券使用规则</text>
				</view>
				<view class="list">
					<text>1.使用后3天有效;</text>
					<text>2.单门订单商品金额满10元可用;</text>
					<text>3.订单使用此优惠券最多抵扣2元;</text>
				</view>
				<view class="text">
					*当限时优惠券和优惠券不可同享,且用户选择享受限时优惠时,不可使用此优惠券。
				</view>
				<view class="btnBox">
					<view class="btn" @click="closePop">
						知道了
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				activityId:''
			};
		},

		components: {},
		props: {
			colors: {
				type: String
			},
			couponList: {
				type: Array
			}
		},
		methods: {
			handelReceive(item) {
				let phone = uni.getStorageSync('phone');
				console.log("手机号", phone);
				if (!phone) {
					this.showModal = true;
					return;
				}
				this.activityId = item.id
				console.log(item);
				// 请求参数
				let data = {
					terminal: "wechat",
					userId: this.$store.state.userInfo.userId,
					phone: uni.getStorageSync("phone"),
					activityId: this.activityId
				}
				this.$request(this.$api.Receive, data, "GET").then(res => {
					if (res.code == 200) {
						console.log("点击领取，成功", res)
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 2000
						})
					} else if (res.code == 500) {
						console.log("点击领取，失败", res)
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 2000
						})
					}
				})
			},
			closePop(){
				this.$refs.popup.close('bottom')
			},
			openTheTips() {
				this.$refs.popup.open('bottom')
			},
			jumpNext(item) {

				this.$emit("itemClick", item);
			}

		}
	};
</script>

<style scoped lang="scss">
	
	.popBox {
		height: 36vh;
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		top:36px;
		.top{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35rpx;
			font-weight: 700;
			top: 30rpx;
			 position: relative;
		}
		.list{
			margin-top: 50rpx;			
			padding: 15rpx;
			padding-left: 50rpx;
			display: flex;
			justify-content: left;
			flex-direction: column;			
			font-size: 27rpx;
			color: #A8A8A8;
			text{
				margin-top: 10rpx;
			}
		}
		.text{
			margin-top: 20rpx;
			padding: 50rpx;
			padding-left: 50rpx;
			font-size: 27rpx;
			color: #A8A8A8;
		}
		.btnBox{
			height: 1vh;
			margin-top: 2vh;			
			display: flex;
			justify-content: center;
			align-items: center;
			.btn{
				height: 4vh;
				width: 90%;
				border-radius: 30rpx;
				background-color: #004e9f;
				color: #fff;
				font-size: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}




	.coupon_box {
		width: 620rpx;
		height: 240upx;
		// margin: 40upx 0 0;
		margin-top: 30upx;
		position: relative;
		border-radius: 20upx;
		overflow: hidden;
		background-color: #dfe6f1;
		// padding-left: 40upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.coupon_box .line {
		height: 170rpx;
		width: 0px;
		border-left: .3px dashed #a6c0dd;

	}

	.coupon_box .topCricle {
		width: 30rpx;
		height: 30rpx;
		border-radius: 30rpx;
		background-color: white;
		position: absolute;
		top: -15rpx;
		right: 230rpx;
	}

	.coupon_box .bottomCricle {
		width: 30rpx;
		height: 30rpx;
		border-radius: 30rpx;
		background-color: white;
		position: absolute;
		bottom: -15rpx;
		right: 230rpx;
	}

	.coupon_box .left {
		width: 60%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		padding: 20upx 0;
		// float: left;
		// padding-left: 20upx;

	}

	.hui {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 70rpx;
		height: 40rpx;
		font-size: 18rpx;
		color: white;
		background-color: #73ba3a;
		border-top-left-radius: 20upx;
		border-bottom-right-radius: 20upx;
		position: absolute;
		top: 0;
		left: 0;

	}

	.coupon_box .left .left_top {
		width: 60vw;
		display: block;
		font-size: 26upx;
		font-weight: bold;
		margin-left: 50upx;
	}

	.left_top .hui_name {
		line-height: 100upx;
		height: 60upx;
		display: inline-block;
		font-size: 35upx;
		color: #004ea1;

	}

	.left_middle {
		margin-top: 8upx;
		font-size: 20upx;
		font-weight: bold;
		color: #333;
		line-height: 30upx;
		margin-left: 50upx;
	}

	.left_bottom {
		display: flex;
		font-size: 20upx;
		font-weight: bold;
		color: #7e827b;
		height: 60upx;
		line-height: 80upx;
		border-radius: 5rpx;
		margin-left: 50upx;
		// text-decoration: underline;
		// background-color: #73ba3a;
	}

	.coupon_box .right {
		text-align: center;
		height: 240upx;
		width: 39%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-around;
		align-content: center;
		// background-color: #A8A8A8;
		padding-bottom: 40upx;
		padding-top: 20upx;
		// float: right;
	}

	.coupon_box .right .shiyong {
		height: 40upx;
		line-height: 40upx;
		background-color: #73ba3a;
		border-radius: 6upx;
		padding: 5upx 10upx;
		color: white;
		margin-top: -3rpx;
		font-size: 24upx;

	}

	.coupon_box .right .money {
		font-size: 65upx;
		color: #004e9f;
		font-weight: bolder;
		margin-top: 20rpx;
	}

	.coupon_box .right text {
		font-size: 24upx;
		color: #004e9f;
		height: 40upx;
		line-height: 34upx;
	}

	.coupon_box .bottom {
		height: 60upx;
		line-height: 60upx;
		display: flex;
		align-content: flex-start;
		font-size: 24upx;
		margin-top: -20upx;
		background-color: #73ba3a;
		color: white;

	}

	.coupon_box .bottom view {
		margin-right: 20upx;
		color: #888;
		font-weight: bold;
	}

	.ysy {
		width: 80upx;
		height: 80upx;
		position: absolute;
		top: 20upx;
		right: 200upx;
	}
</style>